<template>
	<el-dialog
	   v-model="state.changePasswordDialog"
	   title="修改密码"
	   width="400"
	 >
	 
	 <el-form class="login-form" :label-position="labelPosition" :rules="rules">
	 	<el-form-item label="请输入您的旧密码" prop="oldPassword">
	 	    <el-input v-model="passwordData.oldPassword" show-password placeholder="输入您的旧密码" />
	 	</el-form-item>
	 	<el-form-item label="请输入您的新密码" prop="newPassword">
	 	    <el-input v-model="passwordData.newPassword"  show-password placeholder="请输入您的新密码" />
	 	</el-form-item>
	 </el-form>
	 <!-- 底部内容 -->
	 <template #footer>
	   <div class="dialog-footer">
	 	<el-button @click="state.changePasswordDialog = false">取消</el-button>
	 	<el-button   type="primary" @click="changeUserPassword" >
	 	  确定
	 	</el-button>
	   </div>
	 </template>
	 </el-dialog>
</template>

<script lang="ts" setup>
	import { ref,reactive } from 'vue';
	import {changePassword} from '@/api/userinfor.js'
	import { ElMessage } from 'element-plus'
	import {useRouter} from 'vue-router'
	const router=useRouter()
	
	const labelPosition = ref('top')
	
	
	// 表单对象接口
	interface passwordData{
		oldPassword:string;
		newPassword:string;
		
	}
	
	// 表单对象
	const passwordData:passwordData=reactive({
		oldPassword:'',
		newPassword:'',
	})
	
	// 表单规则
	const rules = reactive({
		oldPassword: [
		    { required: true, message: '请输入您的旧密码', trigger: 'blur' },
		],
		newPassword: [
		    { required: true, message: '请输入您的新密码', trigger: 'blur' },
		]
	})
	
	
	
	// 控制弹窗默认关闭
	const state=reactive({
		changePasswordDialog:false
	})
	
	
	
	// 修改密码
	const changeUserPassword=async()=>{
		if(passwordData.oldPassword && passwordData.newPassword){
	        const res=await changePassword(localStorage.getItem('id'),passwordData.oldPassword,passwordData.newPassword)
			if(res.status===0){
				ElMessage({
				    message: '修改成功',
				    type: 'success',
				  })
				state.changePasswordDialog=false
				router.push('/login')
			}else{
				ElMessage.error('修改密码失败，请重新输入!')
			}
		}else{
			ElMessage.error('请检查输入的数据!')
		}
	}
	
	// 打开修改密码弹窗
	const open=()=>{
		state.changePasswordDialog=true
	}
	
	defineExpose({
		open
	})
	
	
</script>

<style lang="scss" scoped>
</style>